<template>
	<view class="container">
		<top-back-navbar position="fixed" title="持仓社区" background="#745DEA" color="#fff" right_title="" right_color="#fff"></top-back-navbar>
		<cxsytabbars :current="3"></cxsytabbars>
		<view class="titile_box">
			<view class="img_box">

				<view class="avatar">
					<image v-if="shequ_data.avatar == ''" style="width: 100%;height: 100%;"
						src="../../static/images/home/active.png" mode=""></image>
					<image v-if="shequ_data.avatar != ''" style="width: 100%;height: 100%;" :src="shequ_data.avatar"
						mode=""></image>
				</view>

			</view>
			<view class="txt_box">
				<view class="txt_box_top" style="display: flex;align-items: center;">
					<p>自身业绩</p>
					<span style="font-size: 24px;margin-left:10px;margin-top: -6px;">¥{{shequ_data.zs_yj}}</span>
				</view>
				<view class="" style="display: flex; justify-content: space-between;width: calc(100vw - 180px);">
					<view class="" style="">
						<p>ID号: {{shequ_data.my_id}}</p>
					</view>
					<view class="" style="">
						<p>级别: {{shequ_data.levelname}}</p>
					</view>
				</view>
			</view>
		</view>

		<view class="content_box">
			<view class="router_box">
			
			
				<view class="" style="
					background: url('/static/zn/mine_xiaoshou.png');
					background-size: 100% 100%;
					background-repeat: no-repea;height:45px;" @click="to_next_page">
				</view>
				<view class="" style="
					background-image: url('/static/zn/mine_chicang.png');
					background-size: 100% 100%;
					background-repeat: no-repea;height:45px;">
				</view>
			
			</view>
			
			<view class="num_list ">
				<view class="">
					<p>总业绩 <br> {{shequ_data.zyj}}</p>
				</view>
				<view class="">
					<p>当日业绩 <br>{{shequ_data.day_yj}}</p>
				</view>
				<view class="">
					<p>粉丝人数 <br>{{shequ_data.z_num}}</p>
				</view>
				<view class="">
					<p>粉丝有效数 <br>{{shequ_data.yx_num}}</p>
				</view>
			
			</view>
			
			<view class="user_lsit">
				<view class="box" v-for="item,index in show_data_lsit" :key="item.id">
					<view class="box_top">
						<view class="">
							{{item.mobile}}
						</view>
						<view class="ID">
							ID号{{item.id}}
						</view>
						<view class="" v-show="item.now_type=='father'">
							<view class="" v-if="item.can_sell_child==1" :style="item.imgurl"
								@click="item.show=!item.show;get_next_usesr(item,index,$event)">
							</view>
							<view class="" v-else
								style="background-image: url('/static/images/home/za_nochakan.png');background-size: 100% 100%;background-repeat: no-repeat;    width: 72px;height: 32px;">
							</view>
						</view>
						<view class="" v-show="item.now_type!='father'" style="opacity: 0;">
			
							<view class=""
								style="background-image: url('/static/images/home/za_nochakan.png');background-size: 100% 100%;background-repeat: no-repeat;    width: 72px;height: 32px;">
			
							</view>
						</view>
					</view>
					<view class="box_center">
						<view class="box_center_item">
							<view class="" style="font-size: 18px;">
								总业绩
							</view>
							<view class="" style="font-size: 16px;">
								¥{{item.zyj}}
							</view>
						</view>
						<view class="box_center_item">
							<view class="">
								当日业绩
							</view>
							<view class="">
								{{item.day_yj}}
							</view>
						</view>
						<view class="box_center_item">
							<view class="">
								本人消费
							</view>
							<view class="">
								{{item.zs_yj}}
							</view>
						</view>
					</view>
			
					<view class="box_bottom">
						<view class="">
							无效会员{{item.wx_num}}人
						</view>
						<view class="">
							有效会员{{item.yx_num}}人
						</view>
						<view class="">
							{{to_text(item.za_isbaodan)}}
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				openid: '',
				shequ_data: {},
				css_bgi: "background-image: url('/static/images/home/za_chakan.png');background-size: 100% 100%;background-repeat: no-repeat;    width: 72px;height: 32px;",
				css_bgi_active: "background-image: url('/static/images/home/za_nochakan.png');background-size: 100% 100%;background-repeat: no-repeat;    width: 72px;height: 32px;",
				css_bgi_show: false,
				child_data: {},
				show_data_lsit: [],
			};
		},
		onLoad: function() {
			uni.showLoading()
			var _this = this
			var id = uni.getStorage({
				key: 'openid',
				success: function(res) {
					var id = res.data
					console.log(id);
					_this.openid=id
					// _this.get_openid(id)
					_this.get_chicang_shequ()
				},
				fail: function(err) {
					uni.hideLoading()
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
			
		},
		methods: {
			to_next_page() {

				uni.navigateTo({
					url: '/pagesZA/media/media2'
				});
			},
			init_child_data(value) {
				var data = value
				for (var i = 0; i < data.user_list.length; i++) {
					data.user_list[i].show = false
					data.user_list[i].imgurl =
						"background-image: url('/static/images/home/za_chakan.png');background-size: 100% 100%;background-repeat: no-repeat;    width: 72px;height: 32px;"
					data.user_list[i].now_type = 'child'
				}
				return data
			},
			get_next_usesr(value, index, ) {

				var openid = value.openid
				var id = value.id
				if (value.show) {
					this.shequ_data.user_list[index].imgurl = this.css_bgi_active
					uni.request({
						url: this.$BASE_URL +
							'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.za_chicang_shequ&app=1&openid=' +
							openid,

						success: res => {
							var data = res.data
							var code = data.error
							var data = this.init_child_data(data)

							this.init_show_data(data.user_list, index, id)
						},
						fail: () => {},
						complete: () => {
							uni.hideLoading();
						}
					});
				} else {
					this.shequ_data.user_list[index].imgurl = this.css_bgi
					this.delete_data(id)
				}
			},
			delete_data(id) {

				var arr = JSON.stringify(this.show_data_lsit)
				arr = JSON.parse(arr)
				arr = arr.filter((item) => {
					return item.father_id != id
				})
				this.show_data_lsit = arr
			},
			init_show_data(arr, index, id) {

				for (var i = 0; i < arr.length; i++) {
					arr[i].father_id = id
					index++
					this.show_data_lsit.splice(index, 0, arr[i])
				}
			},
			to_text(value) {
				if (value == 1) {
					return '本人已下单'
				} else {
					return '本人未下单'
				}
			},
			init_data(value) {

				var data = value
				for (var i = 0; i < data.user_list.length; i++) {
					data.user_list[i].show = false
					data.user_list[i].imgurl =
						"background-image: url('/static/images/home/za_chakan.png');background-size: 100% 100%;background-repeat: no-repeat;    width: 72px;height: 32px;"
					data.user_list[i].now_type = 'father'
				}
				this.shequ_data = data
				this.show_data_lsit = data.user_list
			},
			get_openid(id) {
				this.openid = id
			},
			get_chicang_shequ() {
				var _this = this
				var openid = this.openid
				console.log(openid);
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.za_chicang_shequ&app=1&openid=' +
						openid,

					success: res => {
						var data = res.data
						var code = data.error
						if (code == 0) {
							_this.init_data(data)

						} else {
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 1500,
								position: 'center',

							})
						}

					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container {

		height:calc(100vh - 100rpx);
		background: url('/static/zn/hander_bg.png')0 0 no-repeat;
		// background-size: 150% 106%;

		background-size: 100%;
		position: relative;
		padding: 0 10px;
		overflow: auto;
	}
	.content_box{
		margin-top: 150rpx;
		height: calc(100vh - 300rpx);
		overflow: auto;
	}
	.titile_box {
		display: flex;
		color: #fff;
		padding: 15px;

		.img_box {
			width: 72px;
			height: 72px;
			background: url('/static/images/home/za_shequ_avatar.png') 0 0 no-repeat;
			background-size: 100% 100%;
			border-radius: 50%;
			overflow: hidden;
			position: relative;

			// padding: 10px;
			.avatar {
				width: 50px;
				height: 50px;
				// padding: 10px;
				border-radius: 50%;
				overflow: hidden;
				position: absolute;
				margin: auto;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}

			image {
				width: 100%;
				height: 100%;

			}
		}

		.txt_box {
			margin-left: 15px;
		}

		p {
			font-size: 14px
		}
	}

	.router_box {
		width: 100%;
		display: flex;
		justify-content: space-around;

		view {
			width: 45%;
			height: 40px;
		}
	}

	.num_list {
		width: 100%;
		display: flex;
		justify-content: space-between;
		background: url('/static/zn/mine_list_box.png')0 0 no-repeat;
		background-size: 100% 100%;
		margin: 25rpx 0;
		view {

			width: 25%;
			height: 98px;
			background-size: 100% 98px;
			text-align: center;
			display: flex;
			align-items: center;

			p {
				width: 100%;
				color: #fff;
				font-size: 12px;
				text-align: center;

			}

		}
	}

	.user_lsit {
		width: 100%;

		.box {
			background: url('/static/zn/mine_item_box.png');
			background-size: 100% 100%;
			padding: 20px 20px 20px;
			border-radius: 10px;
			position: relative;
			z-index: 0;

			.box_top {
				display: flex;
				justify-content: space-between;
				color: #000;

				.ID {
					display: block;
					position: absolute;
					width: 100px;
					
					right: 0;
					left: 0;
					margin: auto;
					text-align: center;
				}
			}

			.box_center {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				color: #000;

				.box_center_item {
					width: 30%;
					text-align: center;
				}
			}

			.box_bottom {
				display: flex;
				justify-content: space-between;
				color: #000;
			}
		}

	}
</style>